import React, { Component, Suspense } from 'react'
import { Route, Link } from 'react-router-dom'

console.log('home加载了')
export default class Home extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <h2>Home组件内容</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <Link to="/home/news">News</Link>
            </li>
            <li>
              <Link to="/home/message">Message</Link>
            </li>
          </ul>
          <div>
            <div>
              {/* <News></News>
              <Message></Message> */}
              {/* <Route path="/home/news" component={News}></Route>
              <Route path="/home/message" component={Message}></Route> */}
              {/* 由于默认路由和/home都要渲染home组件,所以要判断一下,如果是默认路由就不会有child.就不去渲染二级路由 */}
              <Suspense
                fallback={
                  <div style={{ fontSize: 40, color: 'red' }}>
                    正在加载请稍后...
                  </div>
                }
              >
                {this.props.child &&
                  this.props.child.map((item) => {
                    return (
                      <Route
                        key={item.path}
                        path={item.path}
                        render={(props) => {
                          return (
                            <item.component
                              {...props}
                              child={item.children}
                            ></item.component>
                          )
                        }}
                      ></Route>
                    )
                  })}
              </Suspense>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
